<ion-view id="shapeshift" hide-tabs>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>Shift</ion-nav-title>
  </ion-nav-bar>

  <ion-content>

    <div class="list" ng-if="fromWallets.length > 0 && toWallets.length > 0">
      <div ng-if="fromWallets.length > 0">
        <div class="item item-icon-right item-heading">
          <span translate>From</span>
          <i class="icon">
            <img ng-if="fromWallet.coin == 'btc'" src="img/icon-bitcoin.svg" width="18">
            <img ng-if="fromWallet.coin == 'bch'" src="img/bitcoin-cash-logo.svg" width="22">
          </i>
        </div>
        <div>
          <a class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
             ng-click="showFromWalletSelector()">
            <span ng-include="'views/includes/walletListFromShapeshift.html'"></span>
          </a>
        </div>
      </div>

      <div ng-if="toWallets.length > 0">
        <div class="item item-icon-right item-heading">
          <span translate>To</span>
          <i class="icon">
              <img ng-if="toWallet.coin == 'btc'" src="img/icon-bitcoin.svg" width="18">
              <img ng-if="toWallet.coin == 'bch'" src="img/bitcoin-cash-logo.svg" width="22">
            </i>
        </div>
        <div>
          <a class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
             ng-click="showToWalletSelector()">
            <span ng-include="'views/includes/walletListToShapeshift.html'"></span>
          </a>
        </div>
      </div>

      <div class="item item-divider"></div>

      <div class="item">
        Rate
        <span class="item-note">
          <span ng-if="!rate">...</span>
          <span ng-if="rate">
            {{rate.rate}} {{toWallet.coin | uppercase}} per {{fromWallet.coin | uppercase}}
          </span>
        </span>
      </div>
      <div class="item">
        Limit
        <span class="item-note">
          <span ng-if="!limit">...</span>
          <span ng-if="limit">
            {{limit.limit}} {{fromWallet.coin | uppercase}}
          </span>
        </span>
      </div>
      <div class="item">
        Minimum
        <span class="item-note">
          <span ng-if="!limit">...</span>
          <span ng-if="limit">
            {{limit.min}} {{fromWallet.coin | uppercase}}
          </span>
        </span>
      </div>
    </div>

    <button
      ng-show="fromWallets.length > 0 && toWallets.length > 0"
      class="shift-button button button-standard button-primary"
      ng-disabled="!fromWallet || !toWallet"
      ng-click="setAmount()" no-low-fee>
      Continue
    </button>

</ion-content>

<wallet-selector
                wallet-selector-title="fromWalletSelectorTitle"
                wallet-selector-wallets="fromWallets"
                wallet-selector-selected-wallet="fromWallet"
                wallet-selector-show="showFromWallets"
                wallet-selector-on-select="onFromWalletSelect">
</wallet-selector>

<wallet-selector
                wallet-selector-title="toWalletSelectorTitle"
                wallet-selector-wallets="toWallets"
                wallet-selector-selected-wallet="toWallet"
                wallet-selector-show="showToWallets"
                wallet-selector-on-select="onToWalletSelect">
</wallet-selector>
</ion-view>
